<template>
  <div>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="分类" prop="cate">
    <el-select v-model="ruleForm.cate" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  
 <el-form-item label="价格" prop="price">
    <el-input v-model="ruleForm.price"></el-input>
  </el-form-item>
  <el-form-item label="口味配制" prop="dishflovar">
    <div  class="flavorBox">
     <!-- 添加按钮 -->
     <span class="addBut" v-if="dishlist.length<=0"><el-button style="background:#ffc200;border:0px;" @click="addmenu">添加</el-button></span>
     <!-- 添加页面 -->
     <div v-if="dishlist.length>0" class="flavor">
        <div class="title">口味名（3个字内）口味标签（输入标签回车添加）</div>
        <div class="cont">
            <div class="items" v-for="(dishf,index) in dishlist" :key="index">
                <div class="itTit">
                    <div class='selectInput'>
                    <el-select v-model="keylist[index]" @change="change(index)">
                            <el-option  :value="items" v-for="(items,ind) in dishkeylist" :key="ind">{{items}}</el-option>
                        </el-select>
                    </div>
                   
                </div>
                <div class="labItems" style="display: flex;">
                  <span v-for="(vitem,ind) in valuelist[index]" :key="ind" style="width:50px"> {{vitem}}
                  <el-button @click='delval(index,ind)' style='border:0px;'>X</el-button>
                  
                  </span>
                </div>
                <div class="delFlavor delBut non">删除</div>
            </div>
        
        </div>
        <div class="addbtn">
        <el-button style="background:#ffc200;border:0px;" @click="addmenu">添加</el-button>
        </div>
    </div>

    </div>
   
  </el-form-item>

  <el-form-item label="图片" prop="image">

  <el-upload
    class="avatar-uploader"
    action="http://localhost:5000/goods/uploader"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    
  </el-form-item>


  <el-form-item label="菜品描述" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
  
  </div>
</template>



<script>
  export default {
    data() {
      return {
        imageUrl:'',
        dishlist:[],
        keylist:[],
        dishkeylist:['甜味','温度','辣度'],
        dishflavorsdata: [
              {'name':'甜味','value':['无糖','少糖','半糖','多糖','全糖']},
              {'name':'温度','value':['热饮','常温','去冰','少冰','多冰']},
              {'name':'忌口','value':['不要葱','不要蒜','不要香菜','不要辣']},
              {'name':'辣度','value':['不辣','微辣','中辣','重辣']}
            ],
        valuelist:[],
        fvalue:[],
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          cate: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],

          price: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
     
        },

      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('立即创建成功');
          } else {
            console.log('立即创建失败');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addmenu(){
          this.dishlist.push({"name":'','values':''})
      },
      change(index){
          var value = this.keylist[index]
          this.fvalue=[]
          this.dishflavorsdata.forEach(element => {
              if(element.name == value){
                  for(var i=0;i<element.value.length;i++){
                      this.fvalue.push(element.value[i])
                  }
              }
              this.valuelist[index]=this.fvalue
          });
      },
      delval(index,ind){
          this.valuelist[index].splice(ind,1)
      },
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>
<style scoped>

element.style {
    display: flex;
}

.flavorBox .addBut {
    background: #ffc200;
    display: inline-block;
    padding: 0px 20px;
    border-radius: 3px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 4px;
    color: #333333;
    font-weight: 500;
}

.flavorBox {
    width: 777px;
   
}

.flavorBox .flavor {
    border: solid 1px #dfe2e8;
    border-radius: 3px;
    padding: 15px;
    background: #fafafb;
}

.flavorBox .flavor .title {
    color: #606168;
    text-align: left;
}

.flavorBox .addBut {
    background: #ffc200;
    display: inline-block;
    padding: 0px 20px;
    border-radius: 3px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 4px;
    color: #333333;
    font-weight: 500;
}

.flavorBox .flavor .cont .items {
    display: flex;
    margin: 10px 0;
}

.flavorBox .flavor .cont .items .itTit {
    width: 150px;
    padding-right:15px;
}



.flavorBox .flavor .cont .items .labItems {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    border-radius: 3px;
    min-height: 39px;
    border: solid 1px #d8dde3;
    background: #fff;
    padding: 0 5px;
}

.flavorBox .flavor .cont .items .delFlavor {
    display: inline-block;
    padding: 0 10px;
    color: #f19c59;
    cursor: pointer;
}
.delBut {
    color: #f56c6c !important;
    position: relative;
}
.selectInput {
    position: relative;
    width: 100%;
    min-width: 100px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>